<template>
    <div>
    <el-row>
      <el-col  :span="8" style="margin-top: 50px;text-align: center;">
        <span>审核<span class="el-icon-s-check"></span>会议室申请</span>
      </el-col>
      <el-col :span="12" :offset="4">
        <div class="grid-content bg-purple-dark" style="margin-top: 40px;margin-right: 20px">

          <el-select v-model="value" placeholder="请选择" id="select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          &nbsp;
          <el-button type="success" @click="submit">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-col :span="22" :offset="1">
      <div class="grid-content bg-purple-light">
        <el-table
          height="400"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="start"
            label="开始时间"
            >
          </el-table-column>
          <el-table-column
            prop="end"
            label="结束时间"
            >
          </el-table-column>
          <el-table-column
            prop="room"
            label="会议室号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="part"
            width="180"
            label="使用部门">
          </el-table-column>
          <el-table-column
            prop="applier"
            width="180"
            label="申请人">
          </el-table-column>
          <el-table-column
            v-if="is_show===3"
            width="200"
            prop="result"
            label="失败描述">
          </el-table-column>
          <el-table-column label="操作"
                           width="120"
                           v-if="is_show===1">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                v-if="is_show===1"
                @click="passevection(scope.$index, scope.row)">审核&nbsp;通过
              </el-button>
              <br>
              <br>
              <el-button
                size="mini"
                type="danger"
                v-if="is_show===1"
                @click="notpass(scope.$index, scope.row)">审核不通过
              </el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <span>确定通过此会议室使用申请？？</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="surepass">确 定</el-button>
  </span>
        </el-dialog>
        <el-dialog title="审核不通过原因" :visible.sync="dialogFormVisible">
          <el-form :model="form"  :rules="rules"  ref="form"  label-width="100px">
            <el-form-item label="不通过原因" :label-width="100"   prop="result">
              <el-input v-model="form.desc" autocomplete="off" :rows="3" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitnotpass">确 定</el-button>
          </div>
        </el-dialog>

      </div>
      <div class="pagenation">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="page_size"
          @prev-click="prevfun"
          @next-click="nextfun"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: 'CheckApplyConferenceView',
     data () {
       var checkresult = (rule, value, callback) => {
        if (value===''||!value) {
          return callback(new Error('审核不通过原因不能为空！！'));
        }
        callback()
       }

      return {
        // rules:{result: [
        //     { validator: checkresult, trigger: 'blur' }
        //   ],},
        form:{
          desc:''
        },
        dialogFormVisible:false,
        dialogVisible: false,
        is_show: 1,//控制失败描述的显示
        total: 5, //所有数据个数
        page_size: 1,//每页数量
        row: '',
        options: [{
          value: 1,
          label: '未审核'
        }, {
          value: 2,
          label: '审核通过'
        },
          {
            value: 3,
            label: '审核不通过'
          }
        ],
        value: 1,
        tableData: []
      }
    },
    mounted () {
      this.get_evection()
    },
    methods: {
      //点击通过审核时会触发这个函数
      passevection (index, row) {
        this.dialogVisible = true
        this.row = row
        console.log(this.row)
      },
      //对话框中的确定会触发这个函数
      surepass () {
        //出差申请通过审核，只需要给后端id和tyep=0
        var id = this.row.id
        this.$axios({
          url: this.$settings.base_url + `/user/checkconference/?id=${id}&type=${0}`,
          method: 'patch'
        }).then(res => {
          this.dialogVisible = false
          this.row = ''
          if (res.data.code === 100) {
            this.$message.success('操作成功')
          } else {
            this.$message.error('无法操作')
          }
          this.get_evection()
        })
      },
      notpass (index, row) {
        this.row = row
        this.dialogFormVisible = true
      },
      submitnotpass () {
        if (this.form.desc === '') {
          this.$message.error('审核不通过原因不能为空！！')
        } else {
          this.$axios({
            url: this.$settings.base_url + `/user/checkconference/?id=${this.row.id}&type=${1}`,
            method: 'patch',
            data: { 'result': this.form.desc }
          }).then(res => {
            if (res.data.code === 100) {
              this.row = ''
              this.form.desc = ''
              this.get_evection()
              this.dialogFormVisible = false
              this.$message.success('操作成功')
            } else {
              this.$message.error('操作失败')
            }
          })
        }
      },

      get_evection (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/checkconference/?page=${page}&condition=${this.value}`,
          method: 'get'
        }).then(res => {
          this.is_show = this.value
          this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
        })
      },

      submit () {
        this.tableData = []
        this.get_evection()
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_evection(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_evection(value)
      },
      currentchange (value) {
        this.get_evection(value)

      },
    }

  }
</script>

<style scoped>

</style>
